<template>
  <div>
    <div id="cat">
      <div class="catdog">
        <img class="photo" src="../../public/img/cat.png" alt="">
        <div class="text"><p>带领养的猫猫</p></div>
        <div style="margin-top: -1%;margin-left: 94%;"><router-link to="/animal" @click="checkToken()">更多>></router-link></div>
      </div>
      <br>
      <div class="content">
        <ul style="white-space:nowrap;">
          <li v-for="(item,index) in cat" :key="index" @click="skipAni(item.id)">
            <img :src="item.image" alt="">
            <p>{{ item.animalName }} {{ item.sex === '0' ? '雌' : '雄' }} {{ item.species }}</p>
            <p>年龄：{{ item.age }}</p>
          </li>
        </ul>
      </div>
    </div>
    <br>
    <div id="dog">
      <div class="catdog">
        <img class="photo" src="../../public/img/dog.png" alt="">
        <div class="text"><p>带领养的狗狗</p></div>
        <div style="margin-top: -1%;margin-left: 94%;"><router-link to="/animal" @click="checkToken()">更多>></router-link></div>
      </div>
      <br>
      <div class="content">
        <ul style="white-space:nowrap;">
          <li v-for="(item,index) in dog" :key="index" @click="skipAni(item.id)">
            <img :src="item.image" alt="">
            <p>{{ item.animalName }} {{ item.sex === '0' ? '雌' : '雄'  }} {{ item.species }}</p>
            <p>年龄：{{ item.age }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue'
import axios from '../utils/axios'
import {useRouter} from 'vue-router'
import { ElMessage } from 'element-plus'
let router = useRouter()
let cat = ref([])
let dog = ref([])
onMounted(() => {
  getAnimal()
})
async function getAnimal(){
  let {data} = await axios.get('getrecommend')
  cat.value = data.data.cat
  dog.value = data.data.dog
}
function checkToken(){
  if(!localStorage.getItem('token')){
    router.push({path:'/home'})
    ElMessage({
      message:'请登录！！！',
      type: 'error',
      center: true,
      duration: 1000
    })
  }
}
function skipAni(id){
  if(!localStorage.getItem('token')){
    ElMessage({
      message:'请登录！！！',
      type: 'error',
      center: true,
      duration: 1000
    })
    return
  }
  router.push({name:"ani",params:{id:id}})
}
</script>

<style scoped>
.photo{
  width: 5%;
}
.catdog{
  width: 70%;
  margin-left: 15%;
  border-bottom: 1px solid black;
}
.text{
  margin-top: -3%;
  margin-left: 6%;
  font-weight: 900;
  font-size: larger;
}
.content{
  width: 70%;
  margin-left: 15%;
}
.content img{
  width: 100%;
}
.content li{
  display:inline-block;
  width: 15%;
  margin-left: 4.1%;
}
</style>
